<template>
  <div v-show="show" class="to-top-container" @click="handleClick">top</div>
</template>

<script>
export default {
    data() {
        return {
            show: false
        }
    },
    methods: {
        handleClick() {
           this.$bus.$emit('setScroll', 0)
        },
        handleShow(dom) {
            if(!dom) {
                this.show = false;
                return
            }
            const range = 500;
            this.show = dom.scrollTop >= range
        }
    },
    mounted() {
        this.$bus.$on('mainScroll', this.handleShow)
    },
    destroyed() {
        this.$bus.$off('mainScroll', this.handleShow)
    }
};
</script>

<style lang="less" scoped>
.to-top-container {
  position: fixed;
  z-index: 99;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #424224;
  right: 30px;
  bottom: 25px;
  color: #fff;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  transition: .3s;
  &:hover {
      transform: scale(1.1);
  }
}
</style>